element组件 表格滚动加载 + 加载图标 |
您所在的位置：网站首页 › php 如何做滑动加载 › element组件 表格滚动加载 + 加载图标 |
element组件 表格滚动加载 + 加载图标
|
项目开发中需要用到一个具有滚动加载并出现加载动画的表格。 所以结合了element-plus中的表格组件进行了二次封装。 技术栈为 vue3 + ts + element-plus 思路 加载数据：对表格中的滚动条事件进行监听，到达条件则触发数据请求。 加载动画实现：使用克隆方法，触发数据请求的时候将克隆节点 append 到表格底部，请求结束的时候移除节点 效果图ScrollTable.vue 滚动表格组件 {{scope.row[item.prop]}} 加载中... import {nextTick, onMounted, ref, watch} from 'vue' const props = defineProps({ showIndex: { type: Boolean, default: false }, showSelection: { type: Boolean, default: false }, tableConfigs: { type: Array, default: () => [] }, tableData: { type: Array, default: () => [] }, isLoading: { type: Boolean, default: false } }) const emit = defineEmits(['selectionChange', 'load']); function handleSelectionChange(event) { emit("selectionChange", event); } // 防抖开关 let toggle = ref(true) function setLoading() { // 防抖 if (toggle.value) { appendLoading() // 触发请求事件 emit('load') } } // 关闭loading动画 watch(() => props.isLoading, val => { if (!val) { removeLoading() } }) // loading动画节点缓存 let loadingTemp :any = null // table dom element const scrollTableRef = ref() // 添加加载图标 function appendLoading() { toggle.value = false console.log('append') // 使用加载缓存，不需要每次加载都重新克隆一次 if (!loadingTemp) { // 克隆动画节点 let loading :any = document.querySelector('#loading') loadingTemp = loading.cloneNode(true) } nextTick(() => { loadingTemp.style.display = 'flex' // 加载动画的节点宽度设置为表格宽度相等 loadingTemp.style.width = scrollTableRef.value.clientWidth + 'px' table.appendChild(loadingTemp) // 出现加载动画的时候将滚动条滚动到最底部，完整呈现加载动画 dom.scrollTop = dom.scrollHeight }) } // 移除加载图标 function removeLoading() { toggle.value = true table.removeChild(loadingTemp) } // 表格中需要滚动的节点缓存 let dom :any = null // 需要添加动画节点的dom元素缓存 let table :any = null onMounted(() => { // 需要给改table加一个标识类，不然会选择到同一页面中的其他表格 class="scroll_table" dom = document.querySelector(".scroll_table .el-table__body-wrapper") table = document.querySelector('.scroll_table .el-table__body tbody') // 添加监听事件 dom.addEventListener("scroll", (v) => { const scrollDistance = dom.scrollHeight - dom.scrollTop - dom.clientHeight if (scrollDistance { tableData.value.push( { id: '3', name: '322', event: '2xx', user: 'cet343', status: '关闭' }) // 关闭加载动画 isLoading.value = false }, 2000) }样式以及加载动画可以自行修改 |
【本文地址】
今日新闻 |
推荐新闻 |